<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="CSS相关, 博客 blog">
    <meta name="description" content="熊猫小二的博客  xmxe&#39;s blog">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- 为了引用qq空间图床文件 -->
    <meta name="referrer" content="no-referrer">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>CSS相关 | 熊猫小二</title>
    <link rel="icon" type="image/x-icon, image/vnd.microsoft.icon" href="/blog/favicon.ico">
    <link rel="stylesheet" type="text/css" href="/blog/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/my.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/loading.css">

    <script src="/blog/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 6.3.0"></head>



   
<style>
    body{
       background-image: url(/blog/medias/cover.jpg);
       background-repeat:no-repeat;
       background-size:cover;
       background-attachment:fixed;
    }
</style>



<body>
    
  <div id="loading-box">
    <div class="loading-left-bg"></div>
    <div class="loading-right-bg"></div>
    <div class="spinner-box">
      <div class="configure-border-1">
        <div class="configure-core"></div>
      </div>
      <div class="configure-border-2">
        <div class="configure-core"></div>
      </div>
      <div class="loading-word">加载中...</div>
    </div>
  </div>
  <!-- 页面加载动画 -->
  <script>
    $(document).ready(function () {
      // document.body.style.overflow = 'auto';
      document.getElementById('loading-box').classList.add("loaded")
    })
  </script>

    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/blog/" class="waves-effect waves-light">
                    
                        <img src="/blog/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">熊猫小二</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="#" class="waves-effect waves-light">

      
      <i class="fas fa-book" style="zoom: 0.6;"></i>
      
      <span>归档</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/blog/archives">
          
          <i class="fas fa-archive" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>归档</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/tags">
          
          <i class="fas fa-tags" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>标签</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/categories">
          
          <i class="fas fa-bookmark" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>分类</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友链</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="#" class="waves-effect waves-light">

      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
      <i class="fas fa-chevron-down" aria-hidden="true" style="zoom: 0.6;"></i>
    </a>
    <ul class="sub-nav menus_item_child ">
      
      <li>
        <a href="/blog/about">
          
          <i class="fas fa-star-of-david" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>主页</span>
        </a>
      </li>
      
      <li>
        <a href="/blog/gallery">
          
          <i class="fas fa-images" style="margin-top: -20px; zoom: 0.6;"></i>
          
          <span>相册</span>
        </a>
      </li>
      
    </ul>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
  
    <li>
      <a class="waves-effect waves-light" onclick="switchNightMode()">
        <i id="sum-moon-icon" class="fas fa-sun" style="zoom:0.65;" title="切换主题"></i>
      </a>
    </li>
  
  
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
          <img src="/blog/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">熊猫小二</div>
        <div class="logo-desc">
            
            熊猫小二的博客  xmxe&#39;s blog
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/blog/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-book"></i>
			
			归档
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  >
              
                <li>

                  <a href="/blog/archives " style="margin-left:75px">
				  
				   <i class="fa fas fa-archive" style="position: absolute;left:50px" ></i>
			      
		          <span>归档</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/tags " style="margin-left:75px">
				  
				   <i class="fa fas fa-tags" style="position: absolute;left:50px" ></i>
			      
		          <span>标签</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/categories " style="margin-left:75px">
				  
				   <i class="fa fas fa-bookmark" style="position: absolute;left:50px" ></i>
			      
		          <span>分类</span>
                  </a>
                </li>
              
            </ul>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友链
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="javascript:;">
			
				<i class="fa-fw fas fa-user-circle"></i>
			
			关于
			<span class="m-icon"><i class="fas fa-chevron-right"></i></span>
		</a>
            <ul  >
              
                <li>

                  <a href="/blog/about " style="margin-left:75px">
				  
				   <i class="fa fas fa-star-of-david" style="position: absolute;left:50px" ></i>
			      
		          <span>主页</span>
                  </a>
                </li>
              
                <li>

                  <a href="/blog/gallery " style="margin-left:75px">
				  
				   <i class="fa fas fa-images" style="position: absolute;left:50px" ></i>
			      
		          <span>相册</span>
                  </a>
                </li>
              
            </ul>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    
<script src="/blog/libs/cryptojs/crypto-js.min.js"></script>
<script>
    (function() {
        let pwd = '';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('请输入访问本文章的密码')).toString(CryptoJS.enc.Hex)) {
                alert('密码错误，将返回主页！');
                location.href = '/blog/';
            }
        }
    })();
</script>




<div class="bg-cover pd-header post-cover" style="background-image: url('/blog/medias/featureimages/0.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 id="post-title" class="description center-align post-title"></h1>

                    
                        <!-- <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script> -->
                        <script>
                            var typedObj = new Typed("#post-title", {
                                strings: [ 'CSS相关' ],
                                startDelay: 300,
                                typeSpeed: 70,
                                loop: false,
                                backSpeed: 50,
                                showCursor: true
                            });
                        </script>
                    
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/blog/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
        background-color: rgb(255, 255, 255,0.7);
        border-radius: 10px;
        box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
        max-height: 480px;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/blog/tags/%E4%BB%A3%E7%A0%81%E5%AE%9E%E6%88%98/">
                                <span class="chip bg-color">代码实战</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/blog/categories/CSS/" class="post-category">
                                CSS
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                

                

                

                

                
            </div>
        </div>
        <hr class="clearfix">

        
        <!-- 是否加载使用自带的 prismjs. -->
        <link rel="stylesheet" href="/blog/libs/prism/prism.css">
        

        
        <!-- 代码块折行 -->
        <style type="text/css">
            code[class*="language-"], pre[class*="language-"] { white-space: pre-wrap !important; }
        </style>
        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h2 id="居中"><a href="#居中" class="headerlink" title="居中"></a>居中</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token comment">&lt;!-- div居中,需要设置宽度--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin</span> <span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>80%</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token comment">&lt;!-- div里面的内容居中--></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin</span> <span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span>80%<span class="token punctuation">;</span><span class="token property">text-align</span><span class="token punctuation">:</span>center</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!-- 两个div设置间距 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin</span><span class="token punctuation">:</span>10px 0</span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token comment">&lt;!--margin外间距是外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。
例如两个文本框的距离使用margin，文本框的边框和文本内容之间的距离使用padding--></span>
<span class="token comment">&lt;!-- 使用弹性容器 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>centered<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>要居中的内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.container</span> <span class="token punctuation">&#123;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* 设置为Flex容器 */</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 水平居中 */</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token comment">/* 垂直居中 */</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span> <span class="token comment">/* 设置容器高度 */</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.centered</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">/* 可以给要居中的元素设置一些样式 */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/UBNf6Z-R6YDelrCK5L5WFg">垂直居中竟有7种写法</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/5ZSMlbjcvaMksx4zakhgzA">42种前端常用布局方案总结※</a><br><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/3yToJq5N8-8SXb0nPDL47g">如何用一行CSS实现10种现代布局？</a></p>
</blockquote>
<h2 id="n个元素等比例在一行展示"><a href="#n个元素等比例在一行展示" class="headerlink" title="n个元素等比例在一行展示"></a>n个元素等比例在一行展示</h2><pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image 1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image 2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image3.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image 3<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image4.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Image 4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.image-container</span> <span class="token punctuation">&#123;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token comment">/* 使用Flexbox布局 */</span>
    <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token comment">/* 等比例图片自动换行到下一行 */</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> space-between<span class="token punctuation">;</span> <span class="token comment">/* 图片之间间距相等 */</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">img</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 25%<span class="token punctuation">;</span> <span class="token comment">/* 将每个图片的宽度设置为25%使其等比例放缩 */</span>
    <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token comment">/* 高度设置为auto，使其自适应宽度 */</span>
    <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token comment">/* 使用margin来设置图片之间的间距 */</span>
    <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> <span class="token comment">/* 自适应填充图片容器，保持图片比例 */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p>扩展<strong>display:flex</strong></p>
</blockquote>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span><span class="token punctuation">&#123;</span>
	<span class="token property">display</span><span class="token punctuation">:</span> flex
	<span class="token property">flex-direction</span><span class="token punctuation">:</span> row<span class="token punctuation">;</span><span class="token comment">/*属性决定主轴的方向（即项目的排列方向）*/</span>
    <span class="token comment">/*
    - row（默认值）:主轴为水平方向，起点在左端。
    - row-reverse:主轴为水平方向，起点在右端。
    - column:主轴为垂直方向，起点在上沿。
    - column-reverse:主轴为垂直方向，起点在下沿。
    */</span>
    <span class="token property">flex-wrap</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span><span class="token comment">/*属性决定了如果一条轴线排不下,如何换行*/</span>
    <span class="token comment">/*
    - nowrap（默认）:不换行。
    - wrap:换行，第一行在上方。
    - wrap-reverse:换行，第一行在下方。
    */</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> flex-start<span class="token punctuation">;</span><span class="token comment">/*属性定义了项目在主轴上的对齐方式。*/</span>
    <span class="token comment">/*
    - flex-start（默认值）:左对齐
    - flex-end:右对齐
    - center:居中
    - space-between:两端对齐，项目之间的间隔都相等。
    - space-around:每个项目两侧的间隔相等。
    */</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span><span class="token comment">/*属性定义项目在交叉轴上如何对齐。简单来讲，假如我们将flex-direction设置为row，即主轴为行。align-items可以决定元素在列上的布局*/</span>
    <span class="token comment">/*
    - flex-start:交叉轴的起点对齐，一行根据上边对齐。
    - flex-end:交叉轴的终点对齐，一行根据下边对齐。
    - center:交叉轴的中点对齐。
    - baseline:项目的第一行文字的基线对齐。
    - stretch（默认值）:如果项目未设置高度或设为auto，将占满整个容器的高度。
    */</span>
    <span class="token property">align-content</span><span class="token punctuation">:</span> stretch<span class="token punctuation">;</span><span class="token comment">/*属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。简单来讲，假如我们将flex-direction设置为row，即主轴为行。align-content决定了出现很多行时，这些行之间怎么对齐。其有一下几个属性：*/</span>
    <span class="token comment">/*
    - flex-start:与交叉轴的起点对齐，跟作文一样，一行一行紧挨着。
    - flex-end:与交叉轴的终点对齐，跟 flex-start类型，不过时从底部开始数。
    - center:与交叉轴的中点对齐，从中间向下向上扩散。
    - space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。
    - space-around:每根轴线两侧的间隔都相等。
    - stretch（默认值）:轴线占满整个交叉轴。
    */</span>
<span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="隐藏滚动条"><a href="#隐藏滚动条" class="headerlink" title="隐藏滚动条"></a>隐藏滚动条</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/**css隐藏滚动条**/</span>
<span class="token selector">.class::-webkit-scrollbar</span><span class="token punctuation">&#123;</span> <span class="token property">width</span><span class="token punctuation">:</span>0 <span class="token important">!important</span> <span class="token comment">/*display:none;*/</span><span class="token punctuation">&#125;</span>
<span class="token selector">::-webkit-scrollbar</span><span class="token punctuation">&#123;</span><span class="token property">width</span><span class="token punctuation">:</span>0 <span class="token important">!important</span> <span class="token comment">/*display:none;*/</span><span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h2 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">文字</span><span class="token punctuation">&#123;</span>
    <span class="token comment">/*
    linear-gradient是CSS中的一个渐变函数，用于在元素的背景中创建一个沿着一条直线方向的颜色渐变效果。linear-gradient函数的基本语法如下：background: linear-gradient(direction, color stop1, color stop2, ...);其中的参数解释如下：	
    - direction: 表示渐变的方向，可以是角度、关键字（top、bottom、left、right、to top left、to bottom right等）以及渐变轴线（由坐标(x1,y1)和(x2,y2)确定的一条直线，可使用两个坐标的百分比表示），也可以是任意组合;
    - color stop: 表示渐变的颜色及其所在的位置，可以定义多个颜色值，用逗号分隔。例如，color stop1可以表示位于渐变的起始点的颜色停止点，而color stop2则对应着终点的颜色停止点。

    CSS3渐变也支持透明度（transparent），可用于创建减弱变淡的效果。为了添加透明度，我们使用rgba()函数来定义颜色节点。rgba()函数中的最后一个参数可以是从0到1的值，它定义了颜色的透明度：0表示完全透明，1表示完全不透明。
    */</span>
	<span class="token property">background-image</span><span class="token punctuation">:</span><span class="token function">-webkit-linear-gradient</span><span class="token punctuation">(</span>bottom<span class="token punctuation">,</span>#708a41<span class="token punctuation">,</span>#8585a5<span class="token punctuation">,</span>#4b8e9a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>top<span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> .2<span class="token punctuation">)</span> 1px<span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 100%<span class="token punctuation">,</span> 0<span class="token punctuation">)</span> 1px<span class="token punctuation">,</span> <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> .1<span class="token punctuation">)</span> 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*
     background-clip属性指定背景绘制区域。
       - border-box默认值。背景绘制在边框方框内（剪切成边框方框）。
       - padding-box背景绘制在衬距方框内（剪切成衬距方框）。
       - content-box背景绘制在内容方框内（剪切成内容方框）。
     */</span>
    <span class="token property">-webkit-background-clip</span><span class="token punctuation">:</span>text<span class="token punctuation">;</span>
    
    <span class="token comment">/**文字中填充颜色transparent:透明色**/</span>
    <span class="token property">-webkit-text-fill-color</span><span class="token punctuation">:</span>transparent<span class="token punctuation">;</span>
    
    <span class="token comment">/**text-stroke(文本边框)是text-stroke-width和text-stroke-color（边框填充颜色）两个属性的简写**/</span>
    <span class="token property">-webkit-text-stroke</span><span class="token punctuation">:</span>6px transparent<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">背景图</span><span class="token punctuation">&#123;</span>
    <span class="token comment">/*从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束*/</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>0deg<span class="token punctuation">,</span> blue<span class="token punctuation">,</span> green 40%<span class="token punctuation">,</span> red<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/**创建一个从圆心开始，向四周渐变的径向渐变效果**/</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>circle at center<span class="token punctuation">,</span> #ffafbd<span class="token punctuation">,</span> #ffc3a0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/**创建一个从最外部向圆心渐变的径向渐变效果,farthest-corner关键字会将圆心设置在最远的角落，而不是默认的居中位置**/</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>circle farthest-corner at center<span class="token punctuation">,</span> #ffafbd<span class="token punctuation">,</span> #ffc3a0<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*
    radial-gradient是CSS中的一个渐变函数，用于在元素的背景中创建一个从一个中心向周围辐射的颜色渐变效果。
    radial-gradient函数的基本语法如下：background: radial-gradient(shape size at position, start-color, ..., last-color);其中的参数解释如下：
    shape: 表示渐变形状，可以是circle(默认)或ellipse；
    size: 表示渐变的大小
      - closest-side表示最近侧的边缘，
      - farthest-side表示最远侧的边缘，
      - closest-corner表示最近角落，
      - farthest-corner表示最远角落，
      - contain表示至少需要占满整个容器，
      - cover则表示覆盖整个容器；
    at position: 表示渐变的中心位置，可以是长度(像素或百分比)或关键字(center、top、bottom、left、right等)
    start-color和last-color: 表示渐变的起始颜色和结束颜色。可以定义多个颜色值，用逗号分隔。
    */</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">page</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">,</span> #ac7399<span class="token punctuation">,</span> #a8a38e<span class="token punctuation">,</span> #b6c24a<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> 500% 500%<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> moiveAnimation 7s infinite<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@keyframes</span> moiveAnimation</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">0%</span> <span class="token punctuation">&#123;</span>
        <span class="token property">background-position</span><span class="token punctuation">:</span> 0% 50%
    <span class="token punctuation">&#125;</span>

    <span class="token selector">50%</span> <span class="token punctuation">&#123;</span>
        <span class="token property">background-position</span><span class="token punctuation">:</span> 100% 50%
    <span class="token punctuation">&#125;</span>

    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span>
        <span class="token property">background-position</span><span class="token punctuation">:</span> 0% 50%
    <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://blog.csdn.net/A757291228/article/details/124611342">超精美渐变色动态背景完整示例</a></p>
</blockquote>
<h2 id="文字自动换行"><a href="#文字自动换行" class="headerlink" title="文字自动换行"></a>文字自动换行</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/*文章内容自动换行*/</span>
<span class="token selector">#articleContent</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">/*
    - break-word:在长单词或URL地址内部进行换行。
    - normal:只在允许的断字点换行（浏览器保持默认处理）
    */</span>
    <span class="token property">word-wrap</span><span class="token punctuation">:</span> break-word<span class="token punctuation">;</span>
    
    <span class="token comment">/*
    - normal:使用浏览器默认的换行规则
    - break-all:允许在单词内换行允许在单词内换行。
    - keep-all:只能在半角空格或连字符处换行
    */</span>
    <span class="token property">word-break</span><span class="token punctuation">:</span> break-all<span class="token punctuation">;</span>
    
    <span class="token comment">/*
     - normal:忽略多余的空白，只保留一个空白（默认）
     - pre:保留空白(行为方式类似于html中的pre标签)
     - nowrap:文本不会换行，会在在同一行上继续，直到遇到br标签为止
     - pre-wrap:保留空白符序列，正常地进行换行
     - pre-line:合并空白符序列，保留换行符
     - inherit:从父元素继承white-space属性的值。
     */</span>
    <span class="token property">white-space</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/7-NxE7K6QPSPLHEKW8ME8g">前端正确处理“文字溢出”的思路</a></p>
</blockquote>
<h2 id="动画-keyframes"><a href="#动画-keyframes" class="headerlink" title="动画@keyframes"></a>动画@keyframes</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/**上下浮动动画**/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> float</span> <span class="token punctuation">&#123;</span>
  <span class="token comment">/**0%是动画的开始时间，100%动画的结束时间。或者通过关键词"from"和"to"，等价于0%和100%。**/</span>	
  <span class="token selector">100%</span> <span class="token punctuation">&#123;</span>
   <span class="token comment">/*
    transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。应用多个属性使用空格如transform: rotate(45deg) scale(2) skew(10deg,5deg) translate(50px,90px);
    - rotate(xxdeg)(2D),rotateX()(3D),rotateY()(3D),rotateZ(180deg)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转
    - translate(x,y)，translateX(x)，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。
    - scale(x,y)，scaleX(X)，scaleY(Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。缩放后不影响文档流,不改变原有布局,元素还是会占用,和relative定位一样,或者可以考虑zoom属性
    - skew(x,y)，skewX(x)，skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。
    */</span>
   <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>20px<span class="token punctuation">)</span><span class="token punctuation">;</span>
   
   <span class="token comment">/**box-shadow属性可以设置一个或多个下拉阴影的框。**/</span>
   <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 40px 10px -18px <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> .2<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 40px 16px -12px <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> .2<span class="token punctuation">)</span>
   <span class="token property">transform-origin</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span><span class="token comment">/**(x,y)来改变元素基点**/</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/**隐藏/显示动画**/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> move</span><span class="token punctuation">&#123;</span>
    <span class="token selector">0%</span><span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>100px<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">opacity</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">50%</span><span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>50px<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">opacity</span><span class="token punctuation">:</span> 0.5<span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token selector">100%</span><span class="token punctuation">&#123;</span>
        <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token property">opacity</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
	<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/**使用**/</span>
<span class="token selector">div</span><span class="token punctuation">&#123;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0 60px 12px -18px <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> .1<span class="token punctuation">)</span><span class="token punctuation">,</span> 0 60px 20px -12px <span class="token function">hsla</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> 0%<span class="token punctuation">,</span> .1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">/*
     animation: name duration timing-function delay iteration-count direction;
     animation-name:规定需要绑定到选择器的keyframe名称。
     animation-duration:规定完成动画所花费的时间，以秒或毫秒计
     animation-timing-function:规定动画的速度曲线。
       - linear:动画从头到尾的速度是相同的
       - ease:默认。动画以低速开始，然后加快,在结束前变慢
       - ease-in:动画以低速开始
       - ease-out:动画以低速结束
       - ease-in-out:动画以低速开始和结束
       - cubic-bezier(n,n,n,n):在cubic-bezier函数中自己的值
     animation-delay:规定在动画开始之前的延迟。
     animation-iteration-count:规定动画应该播放的次数。默认为1次，可以填写数字
     animation-direction:规定是否应该轮流反向播放动画。如果animation-direction值是“alternate”，则动画会在奇数次数（1、3、5等等）正常播放，而在偶数次数（2、4、6等等）向后播放。如果把动画设置为只播放一次，则该属性没有效果
    */</span>
    <span class="token property">animation</span><span class="token punctuation">:</span> float 1s infinite ease-in-out alternate
    <span class="token comment">/**animation: move .4s linear 1 normal**/</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">div:hover</span><span class="token punctuation">&#123;</span>
    <span class="token comment">/*
     animation-play-state属性规定动画正在运行还是暂停。只有两个属性可以设置：
       - paused:规定动画已暂停
       - running:规定动画正在播放
     */</span>
	<span class="token property">animation-play-state</span><span class="token punctuation">:</span> paused
     
    <span class="token comment">/*
     animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见。(规定当动画不播放时（当动画完成时或当动画有一个延迟为开始播放时）要用到的元素样式)
       - none表示等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响
       - both表示等待期样式为第一帧样式，完成期保持最后一帧样式
       - backwards表示等待期为第一帧样式，完成期跳转为初始样式
       - forwards表示等待期保持初始样式，完成期间保持最后一帧样式
     */</span>
     <span class="token property">animation-fill-mode</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token comment">/**鼠标滑过翻转**/</span>
<span class="token selector">img:hover</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> fadenum 2s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> fadenum</span> <span class="token punctuation">&#123;</span>
   <span class="token selector">100%</span><span class="token punctuation">&#123;</span> <span class="token property">transform</span><span class="token punctuation">:</span><span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/8uV6yJznXe-dnCmJQ5VSLw">12个强大而实用的JavaScript动画库</a></p>
</blockquote>
<h2 id="transition"><a href="#transition" class="headerlink" title="transition"></a>transition</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/**鼠标滑动图标旋转**/</span>
<span class="token selector">div</span><span class="token punctuation">&#123;</span>
    <span class="token property">-webkit-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>3600deg<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">-moz-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">-o-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">-ms-transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span> <span class="token important">!important</span><span class="token punctuation">;</span>
    
    <span class="token comment">/*
     transition属性是一个简写属性，用于设置四个过渡属性.
       - transition-property:规定设置过渡效果的CSS属性的名称。none没有属性会获得过渡效果。all所有属性都将获得过渡效果。property定义应用过渡效果的CSS属性名称列表，列表以逗号分隔。
       - transition-duration:规定完成过渡效果需要多少秒或毫秒。
       - transition-timing-function:规定速度效果的速度曲线。
         -- inear规定以相同速度开始至结束的过渡效果（等于cubic-bezier(0,0,1,1)）
         -- ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）
         -- ease-in规定以慢速开始的过渡效果（等于cubic-bezier(0.42,0,1,1)）
         -- ease-out规定以慢速结束的过渡效果（等于cubic-bezier(0,0,0.58,1)）
         -- ease-in-out规定以慢速开始和结束的过渡效果（等于cubic-bezier(0.42,0,0.58,1)）。
         -- cubic-bezier(n,n,n,n)在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。
       - transition-delay:定义过渡效果何时开始。
     */</span>
    <span class="token property">-webkit-transition</span><span class="token punctuation">:</span> all .7s<span class="token punctuation">;</span>
    <span class="token property">-moz-transition</span><span class="token punctuation">:</span> all .7s<span class="token punctuation">;</span>
    <span class="token property">-o-transition</span><span class="token punctuation">:</span> all .7s<span class="token punctuation">;</span>
    <span class="token property">transition</span><span class="token punctuation">:</span> all .7s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">a</span><span class="token punctuation">&#123;</span>
    <span class="token comment">/*光标样式*/</span>
    <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="网站变灰"><a href="#网站变灰" class="headerlink" title="网站变灰"></a>网站变灰</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/*在想要变灰的控件里加入此属性即可,如果想要网站整体变灰在html&#123;&#125;里面加入即可*/</span>
<span class="token selector">.gray</span> <span class="token punctuation">&#123;</span>
    <span class="token property">-webkit-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">-webkit-filter</span><span class="token punctuation">:</span><span class="token function">grayscale</span><span class="token punctuation">(</span>1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">-moz-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">-ms-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">-o-filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token property">progid</span><span class="token punctuation">:</span>DXImageTransform.Microsoft.<span class="token function">BasicImage</span><span class="token punctuation">(</span>grayscale=1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">"data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'>&lt;filter id=\'grayscale\'>&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>&lt;/filter>&lt;/svg>#grayscale"</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>


<h2 id="css伪类"><a href="#css伪类" class="headerlink" title="css伪类"></a>css伪类</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token punctuation">:</span>link <span class="token comment">/*应用于未被访问过的链接*/</span>
<span class="token punctuation">:</span>hover <span class="token comment">/*应用于鼠标悬停到的元素*/</span>
<span class="token punctuation">:</span>active <span class="token comment">/*应用于被激活的元素*/</span>
<span class="token punctuation">:</span>visited <span class="token comment">/*应用于被访问过的链接，与:link互斥。*/</span>
<span class="token punctuation">:</span>focus <span class="token comment">/*应用于拥有键盘输入焦点的元素。*/</span>

<span class="token punctuation">:</span>first-child <span class="token comment">/*选择某个元素的第一个子元素*/</span>
<span class="token punctuation">:</span>last-child <span class="token comment">/*选择某个元素的最后一个子元素*/</span>
<span class="token punctuation">:</span><span class="token function">nth-child</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span> <span class="token comment">/*匹配属于其父元素的第n个子元素，不论元素的类型*/</span>
<span class="token punctuation">:</span><span class="token function">nth-last-child</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">/*从这个元素的最后一个子元素开始算,选匹配属于其父元素的第n个子元素，不论元素的类型*/</span>
<span class="token punctuation">:</span><span class="token function">nth-of-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">/*规定属于其父元素的第n个指定元素*/</span>
<span class="token punctuation">:</span><span class="token function">nth-last-of-type</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">/*从元素的最后一个开始计算,规定属于其父元素的指定元素*/</span>
<span class="token punctuation">:</span>first-of-type <span class="token comment">/*选择一个上级元素下的第一个同类子元素*/</span>
<span class="token punctuation">:</span>last-of-type <span class="token comment">/*选择一个上级元素的最后一个同类子元素*/</span>
<span class="token punctuation">:</span>only-child <span class="token comment">/*选择它的父元素的唯一一个子元素*/</span>
<span class="token punctuation">:</span>only-of-type <span class="token comment">/*选择一个元素是它的上级元素的唯一一个相同类型的子元素*/</span>
<span class="token punctuation">:</span>checked <span class="token comment">/*匹配被选中的input元素，这个input元素包括radio和checkbox。*/</span>
<span class="token punctuation">:</span>empty <span class="token comment">/*选择的元素里面没有任何内容。*/</span>
<span class="token punctuation">:</span>disabled <span class="token comment">/*匹配禁用的表单元素。*/</span>
<span class="token punctuation">:</span>enabled <span class="token comment">/*匹配没有设置disabled属性的表单元素。*/</span>
<span class="token punctuation">:</span>valid <span class="token comment">/*匹配条件验证正确的表单元素。*/</span>
<span class="token punctuation">:</span>in-range <span class="token comment">/*选择具有指定范围内的值的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>invalid <span class="token property">input</span><span class="token punctuation">:</span>invalid <span class="token comment">/*选择所有具有无效值的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>optional <span class="token property">input</span><span class="token punctuation">:</span>optional <span class="token comment">/*选择不带"required"属性的&lt;input>元素。*/</span>
<span class="token punctuation">:</span><span class="token function">lang</span><span class="token punctuation">(</span>language<span class="token punctuation">)</span>	<span class="token property">p</span><span class="token punctuation">:</span><span class="token function">lang</span><span class="token punctuation">(</span>it<span class="token punctuation">)</span> <span class="token comment">/*选择每个lang属性值以"it"开头的&lt;p>元素。*/</span>
<span class="token punctuation">:</span>focus <span class="token comment">/*选择获得焦点的&lt;input>元素。*/</span>
<span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>selector<span class="token punctuation">)</span> <span class="token punctuation">:</span><span class="token function">not</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span> <span class="token comment">/*选择每个非&lt;p>元素的元素。*/</span>
<span class="token punctuation">:</span>out-of-range <span class="token property">input</span><span class="token punctuation">:</span>out-of-range <span class="token comment">/*选择值在指定范围之外的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>read-only <span class="token property">input</span><span class="token punctuation">:</span>read-only <span class="token comment">/*选择指定了"readonly"属性的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>read-write	<span class="token property">input</span><span class="token punctuation">:</span>read-write <span class="token comment">/*选择不带"readonly"属性的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>required <span class="token property">input</span><span class="token punctuation">:</span>required <span class="token comment">/*选择指定了"required"属性的&lt;input>元素。*/</span>
<span class="token punctuation">:</span>root root <span class="token comment">/*选择元素的根元素。*/</span>
<span class="token punctuation">:</span>target	#<span class="token property">news</span><span class="token punctuation">:</span>target <span class="token comment">/*选择当前活动的#news元素（单击包含该锚名称的URL）*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="css伪元素"><a href="#css伪元素" class="headerlink" title="css伪元素"></a>css伪元素</h2><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token punctuation">:</span><span class="token punctuation">:</span>after <span class="token comment">/*例: p::after	在每个&lt;p>元素之后插入内容。*/</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>before <span class="token comment">/*例: p::before 在每个&lt;p>元素之前插入内容。*/</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>first-letter <span class="token comment">/*例: p::first-letter 选择每个&lt;p>元素的首字母。*/</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>first-line <span class="token comment">/*例: p::first-line 选择每个&lt;p>元素的首行。*/</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>selection <span class="token comment">/*例: p::selection 选择用户选择的元素部分。*/</span>
<span class="token punctuation">:</span><span class="token punctuation">:</span>marker <span class="token comment">/*例: li::marker &#123;content:'>';&#125; 把li前面的'•'变成'>'*/</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p><a target="_blank" rel="noopener" href="https://www.w3school.com.cn/css/css_pseudo_elements.asp">CSS伪元素</a></p>
</blockquote>
<h2 id="21个超实用的CSS技巧"><a href="#21个超实用的CSS技巧" class="headerlink" title="21个超实用的CSS技巧"></a>21个超实用的CSS技巧</h2><h3 id="文档布局"><a href="#文档布局" class="headerlink" title="文档布局"></a>文档布局</h3><p>仅用两行CSS，就可以创建响应式文档样式布局。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.parent</span><span class="token punctuation">&#123;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">minmax</span><span class="token punctuation">(</span>150px<span class="token punctuation">,</span> 25%<span class="token punctuation">)</span> 1fr<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="自定义光标"><a href="#自定义光标" class="headerlink" title="自定义光标"></a>自定义光标</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">html</span><span class="token punctuation">&#123;</span>
  <span class="token property">cursor</span><span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'no.png'</span><span class="token punctuation">)</span></span><span class="token punctuation">,</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="用图像填充文本"><a href="#用图像填充文本" class="headerlink" title="用图像填充文本"></a>用图像填充文本</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">h1</span><span class="token punctuation">&#123;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span><span class="token string url">'images/flower.jpg'</span><span class="token punctuation">)</span></span><span class="token punctuation">;</span>
  <span class="token property">background-clip</span><span class="token punctuation">:</span> text<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> transparent<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<blockquote>
<p>注意：使用此技术时，请始终指定background-color，因为如果由于某种原因图像未加载，可以将其用作回退值。</p>
</blockquote>
<h3 id="为文本添加描边效果"><a href="#为文本添加描边效果" class="headerlink" title="为文本添加描边效果"></a>为文本添加描边效果</h3><p>使用text-stroke属性可以使文本更清晰可见，因为会向文本添加描边笔触或轮廓。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Apply a 5px wide crimson text stroke to h1 elements */</span>
<span class="token selector">h1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">-webkit-text-stroke</span><span class="token punctuation">:</span> 5px crimson<span class="token punctuation">;</span>
  <span class="token property">text-stroke</span><span class="token punctuation">:</span> 5px crimson<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="paused伪类"><a href="#paused伪类" class="headerlink" title=":paused伪类"></a>:paused伪类</h3><p>使用:paused选择器在暂停状态下设置媒体元素的样式，与:paused类似的还有:playing。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 目前只支持Safari浏览器 */</span>
<span class="token selector">video:paused</span> <span class="token punctuation">&#123;</span>
  <span class="token property">opacity</span><span class="token punctuation">:</span> 0.6<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="强调文本"><a href="#强调文本" class="headerlink" title="强调文本"></a>强调文本</h3><p>使用text-emphasis属性将强调标记应用于文本元素。你可以指定任意字符串（包括表情符号）作为值。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">h1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">text-emphasis</span><span class="token punctuation">:</span> <span class="token string">"⏰"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="首字母下沉"><a href="#首字母下沉" class="headerlink" title="首字母下沉"></a>首字母下沉</h3><p>避免不必要的span，改用伪元素来设置内容的样式，同样，与:first-letter伪元素类似的还有:first-line伪元素。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">h1::first-letter</span><span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span>#ff8A00<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="变量回退值"><a href="#变量回退值" class="headerlink" title="变量回退值"></a>变量回退值</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">&#123;</span>
  <span class="token property">--orange</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
  <span class="token property">--coral</span><span class="token punctuation">:</span> coral<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">h1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--black<span class="token punctuation">,</span> crimson<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="更改书写模式"><a href="#更改书写模式" class="headerlink" title="更改书写模式"></a>更改书写模式</h3><p>你可以使用书写模式属性来指定文本在网站上的布局方式，垂直或水平布局。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;h1>Cakes &amp; Bakes&lt;/h1>
h1</span> <span class="token punctuation">&#123;</span>
  <span class="token property">writing-mode</span><span class="token punctuation">:</span> sideways-lr<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="彩虹动画"><a href="#彩虹动画" class="headerlink" title="彩虹动画"></a>彩虹动画</h3><p>为元素创建连续循环的颜色动画以吸引用户的注意力。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">button</span><span class="token punctuation">&#123;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> rainbow-animation 200ms linear infinite<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@keyframes</span> rainbow-animation</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">to</span><span class="token punctuation">&#123;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">hue-rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
 <span class="token selector">from</span><span class="token punctuation">&#123;</span>
    <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">hue-rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="悬停缩放"><a href="#悬停缩放" class="headerlink" title="悬停缩放"></a>悬停缩放</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 定义图片容器的高度和宽度，以及设置图元溢出时隐藏 */</span>
<span class="token selector">.img-container</span> <span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>

<span class="token comment">/* 让图片填充整个容器 */</span>

<span class="token selector">.img-container img</span> <span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">object-fit</span><span class="token punctuation">:</span> cover<span class="token punctuation">;</span> 
  <span class="token property">transition</span><span class="token punctuation">:</span> transform 200m ease-in<span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span>

 <span class="token selector">img:hover</span><span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">scale</span><span class="token punctuation">(</span>1.2<span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><p>使用属性选择器根据属性选择HTML元素。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">&lt;a href=<span class="token string">""</span>>HTML&lt;/a>
&lt;a>CSS&lt;/a>
&lt;a href=<span class="token string">""</span>>JavaScript&lt;/a>
<span class="token comment">/* 为每个带href的a元素设置颜色 */</span>

<span class="token selector">a[href]</span> <span class="token punctuation">&#123;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="剪切元素"><a href="#剪切元素" class="headerlink" title="剪切元素"></a>剪切元素</h3><p>使用clip-path属性创建有趣的视觉效果，例如将元素剪裁为自定义的三角形或六边形形状。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span>
  <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>50% 0%<span class="token punctuation">,</span> 0% 100%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="检测属性支持"><a href="#检测属性支持" class="headerlink" title="检测属性支持"></a>检测属性支持</h3><p>使用CSS @support rule直接在CSS中检测对CSS功能的支持。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token atrule"><span class="token rule">@supports</span> <span class="token punctuation">(</span><span class="token property">accent-color</span><span class="token punctuation">:</span> #74992e<span class="token punctuation">)</span></span> <span class="token punctuation">&#123;</span>
<span class="token comment">/* 如果浏览器支持，则以下代码可以运行 */</span>
  <span class="token selector">blockquote</span> <span class="token punctuation">&#123;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>

<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="CSS嵌套"><a href="#CSS嵌套" class="headerlink" title="CSS嵌套"></a>CSS嵌套</h3><p>CSS工作组一直在研究如何将嵌套添加到CSS中。通过嵌套，我们将能够编写更直观、更有条理、更高效的CSS。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css">&lt;header class=<span class="token string">"header"</span>>
  &lt;p class=<span class="token string">"text"</span>>Lorem ipsum<span class="token punctuation">,</span> dolor&lt;/p>
&lt;/header>
<span class="token comment">/* 你可以在Safari浏览器中尝试使用CSS嵌套*/</span>
<span class="token selector">.header</span><span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> salmon<span class="token punctuation">;</span>
  <span class="token selector">.text</span><span class="token punctuation">&#123;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="clamp函数"><a href="#clamp函数" class="headerlink" title="clamp函数"></a>clamp函数</h3><p>clamp()函数可用于响应式和流畅的排版。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* Syntax: clamp(minimum, preferred, maximum) */</span>
<span class="token selector">h1</span><span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">clamp</span><span class="token punctuation">(</span>2.25rem<span class="token punctuation">,</span>6vw<span class="token punctuation">,</span>4rem<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="设置可选字段的样式"><a href="#设置可选字段的样式" class="headerlink" title="设置可选字段的样式"></a>设置可选字段的样式</h3><p>你可以使用:optional伪类设置表单字段的样式，例如输入框、下拉框和文本框，这些字段上没有必要属性。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*:optional</span><span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="字间距属性"><a href="#字间距属性" class="headerlink" title="字间距属性"></a>字间距属性</h3><p>使用word-spacing属性指定两个单词之间的空格长度。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span> <span class="token punctuation">&#123;</span>
  <span class="token property">word-spacing</span><span class="token punctuation">:</span> 1.245rem<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="创建渐变阴影"><a href="#创建渐变阴影" class="headerlink" title="创建渐变阴影"></a>创建渐变阴影</h3><p>创建渐变阴影以提供独特的用户体验。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">:root</span><span class="token punctuation">&#123;</span>
  <span class="token property">--gradient</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to bottom right<span class="token punctuation">,</span> crimson<span class="token punctuation">,</span> coral<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">div::after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">inset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--gradient<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>25px<span class="token punctuation">)</span> <span class="token function">brightness</span><span class="token punctuation">(</span>1.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>15%<span class="token punctuation">)</span> <span class="token function">scale</span><span class="token punctuation">(</span>0.95<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="更改标题位置"><a href="#更改标题位置" class="headerlink" title="更改标题位置"></a>更改标题位置</h3><p>使用caption-side属性将表格标题放在表格的指定一侧。</p>
<h3 id="创建文本列"><a href="#创建文本列" class="headerlink" title="创建文本列"></a>创建文本列</h3><p>使用column属性为文本元素制作漂亮的列布局。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">p</span><span class="token punctuation">&#123;</span>
  <span class="token property">column-count</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
  <span class="token property">column-gap</span><span class="token punctuation">:</span> 4.45rem<span class="token punctuation">;</span>
  <span class="token property">column-rule</span><span class="token punctuation">:</span> 2px dotted crimson<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="细数那些惊艳一时的CSS属性"><a href="#细数那些惊艳一时的CSS属性" class="headerlink" title="细数那些惊艳一时的CSS属性"></a>细数那些惊艳一时的CSS属性</h2><h3 id="position-sticky"><a href="#position-sticky" class="headerlink" title="position: sticky"></a>position: sticky</h3><p>标题在滚动的时候，会一直贴着最顶上。这种场景实际上很多：比如表格的标题栏、网站的导航栏、手机通讯录的人名首字母标题等等。</p>
<p>css部分</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.container</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> oldlace<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 140px<span class="token punctuation">;</span>
    <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.container div</span> <span class="token punctuation">&#123;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.container .header</span> <span class="token punctuation">&#123;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>187<span class="token punctuation">,</span> 153<span class="token punctuation">,</span> 153<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>html部分</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Header<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="empty选择器"><a href="#empty选择器" class="headerlink" title=":empty选择器"></a>:empty选择器</h3><p>平时开发的时候数据都是通过请求接口获取的，也会存在接口没有数据的情况。这个时候正常的做法是给用户一个提示，让用户知道当前不是出bug了，而是确实没有数据。一般的做法是我们人为的判断当前数据返回列表的长度是否为0，如果为0则显示一个“暂无数据”给用户，反之则隐藏该提示。写过Vue的小伙伴是不是经常这么做：</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>datas.length<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>data in datas<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-else</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>暂无数据<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>但是有了:empty这个选择器后，你大可以把这个活交给CSS来干。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.container</span> <span class="token punctuation">&#123;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> antiquewhite<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.container:empty::after</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"暂无数据"</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="gap"><a href="#gap" class="headerlink" title="gap"></a>gap</h3><p>日常开发中，都有用过padding和margin吧，margin一般用做边距，让两个元素隔开一点距离，但是对于一些场景下，我们很难通过计算得到一个除的尽的值，比如100px我要让3个元素等分，且每个元素隔开10px，这就很尴尬了。没关系！我们可以用gap属性，gap属性它适用于Grid布局、Flex布局以及多列布局，并不一定只是Grid布局中可以使用。比如我们要让每个元素之间隔开20px，那么使用gap我们可以这样：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">div</span><span class="token punctuation">&#123;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex | grid<span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="background-clip-text"><a href="#background-clip-text" class="headerlink" title="background-clip: text"></a>background-clip: text</h3><p>大家平时background-clip是不是都用来做一些裁切效果？你知道它还有个属性值是text吗？background-clip:text用来做带背景的文字效果，相信大家平时浏览一些网站的时候都会看到类似的实现，实际上通过CSS我们也能做到这种效果，可不要傻傻的以为都是用制图工具做的。</p>
<h3 id="user-select"><a href="#user-select" class="headerlink" title="user-select"></a>user-select</h3><p>网页和APP有个不同点是，网页上的字是可以通过光标选中的，而APP的不行。有的小伙伴可能会疑惑：那我网页上也用不着这个属性啊？非也非也，我们知道现在很多新的技术产生，可以在APP上嵌套webview或者是网页，比如Electron做的桌面端应用，大家没见过哪个桌面端应用是可以光标选中的吧？而user-select属性可以禁用光标选中，让网页看着和移动端一样。</p>
<h3 id="invalid伪类"><a href="#invalid伪类" class="headerlink" title=":invalid伪类"></a>:invalid伪类</h3><p>:invalid表示任意内容未通过验证的input或其他form元素。什么意思呢？举个例子。这是一个表单。</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url_input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter a URL:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url_input<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email_input<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter an email address:<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email_input<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>我们的需求是让input当值有效时，元素颜色为绿色，无效时为红色。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">input:invalid</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ffdddd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">form:invalid</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 5px solid #ffdddd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">input:valid</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ddffdd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">form:valid</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 5px solid #ddffdd<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">input:required</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> #800000<span class="token punctuation">;</span>
  <span class="token property">border-width</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">input:required:invalid</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-color</span><span class="token punctuation">:</span> #C00000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>有了:invalid属性后，我们就可以不用JS也能实现校验提示的效果了。</p>
<h3 id="focus-within伪类"><a href="#focus-within伪类" class="headerlink" title=":focus-within伪类"></a>:focus-within伪类</h3><p>:focus-within表示一个元素获得焦点，或该元素的后代元素获得焦点，就会匹配上。</p>
<p>CSS</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">form</span> <span class="token punctuation">&#123;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 1px solid<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">form:focus-within</span> <span class="token punctuation">&#123;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0px 4px 4px <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> beige<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>HTML</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ipt<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>请输入...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
<p>可以根据子元素的状态来改变父元素的样式，方便的很。也能玩出不少花样来。</p>
<h3 id="mix-blend-mode-difference"><a href="#mix-blend-mode-difference" class="headerlink" title="mix-blend-mode:difference"></a>mix-blend-mode:difference</h3><p>mix-blend-mode:difference属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。其中，difference表示差值。</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.mode</span> <span class="token punctuation">&#123;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
    <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
    <span class="token property">mix-blend-mode</span><span class="token punctuation">:</span>difference<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.dark</span> <span class="token punctuation">&#123;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> grey<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.light</span> <span class="token punctuation">&#123;</span>
    <span class="token property">mix-blend-mode</span><span class="token punctuation">:</span>difference<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> -6px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 4px solid grey<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="超酷的纯CSS-Loading效果"><a href="#超酷的纯CSS-Loading效果" class="headerlink" title="超酷的纯CSS Loading效果"></a>超酷的纯CSS Loading效果</h2><p>为保证运行正常，咱先规定下：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<h3 id="平滑加载"><a href="#平滑加载" class="headerlink" title="平滑加载"></a>平滑加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-1">&lt;/div>
.progress-1</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>#000 0 0<span class="token punctuation">)</span> 0/0% no-repeat #ddd<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p1 2s infinite linear<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p1</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<ol>
<li>linear-gradient(#000 0 0)你可以理解为linear-gradient(#000 0 100%)，如果还不熟悉，复制linear-gradient(#000 0 50%, #f00 50% 0)，替换原先的部分跑一下。觉得linear-gradient(#000 0 0)别扭的话，直接写#000即可。</li>
<li>0&#x2F;0%是background-position: 0;&#x2F;background-size: 0;的简写。</li>
</ol>
<h3 id="按步加载"><a href="#按步加载" class="headerlink" title="按步加载"></a>按步加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-2">&lt;/div>
.progress-2</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>orange 0 0<span class="token punctuation">)</span> 0/0% no-repeat lightblue<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p2 2s infinite <span class="token function">steps</span><span class="token punctuation">(</span>10<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p2</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>110%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<ol>
<li>steps(10)是step(10, end)的简写，指明刚开始没有，所以有<strong>第2点</strong>的处理</li>
<li>100% {background-size:110%}添加多一个step的百分比，上面的step是10，所以是<code>100% + (1/10)*100% = 110%</code></li>
</ol>
<h3 id="条纹加载"><a href="#条纹加载" class="headerlink" title="条纹加载"></a>条纹加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-3">&lt;/div>
.progress-3</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>135deg<span class="token punctuation">,</span>#f03355 0 10px<span class="token punctuation">,</span>#ffa516 0 20px<span class="token punctuation">)</span> 0/0% no-repeat<span class="token punctuation">,</span><span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>135deg<span class="token punctuation">,</span>#ddd 0 10px<span class="token punctuation">,</span>#eee 0 20px<span class="token punctuation">)</span> 0/100%<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p3 2s infinite<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p3</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>repeating-linear-gradient(135deg,#ddd 0 10px,#eee 0 20px) 0&#x2F;100%;画出灰色的斑马线条纹，repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0&#x2F;0% no-repeat则是进度条加载的条纹。</p>
<h3 id="虚线加载"><a href="#虚线加载" class="headerlink" title="虚线加载"></a>虚线加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-4">&lt;/div>
.progress-4</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>20px<span class="token punctuation">;</span>
    <span class="token property">-webkit-mask</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>90deg<span class="token punctuation">,</span>#000 70%<span class="token punctuation">,</span>#0000 0<span class="token punctuation">)</span> 0/20%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>#000 0 0<span class="token punctuation">)</span> 0/0% no-repeat #ddd<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p4 2s infinite <span class="token function">steps</span><span class="token punctuation">(</span>6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p4</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>120%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>-webkit-mask默认有值repeat，不然遮罩不会有五个。</p>
<h3 id="电池加载"><a href="#电池加载" class="headerlink" title="电池加载"></a>电池加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-5">&lt;/div>
.progress-5</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>80px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>40px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span>2px solid #000<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span>3px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">repeating-linear-gradient</span><span class="token punctuation">(</span>90deg<span class="token punctuation">,</span>#000 0 10px<span class="token punctuation">,</span>#0000 0 16px<span class="token punctuation">)</span> 0/0% no-repeat content-box content-box<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p5 2s infinite <span class="token function">steps</span><span class="token punctuation">(</span>6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.progress-5::before</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateY</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span> 2px solid #000<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p5</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>120%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>原作者对.progress-5::before伪元素实现如下：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">.progress-5::before</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">top</span><span class="token punctuation">:</span>-2px<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span>-2px<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>#0000   <span class="token function">calc</span><span class="token punctuation">(</span>50% - 7px<span class="token punctuation">)</span><span class="token punctuation">,</span>#000 0 <span class="token function">calc</span><span class="token punctuation">(</span>50% - 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#0000 0 <span class="token function">calc</span><span class="token punctuation">(</span>50% + 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#000 0 <span class="token function">calc</span><span class="token punctuation">(</span>50% + 7px<span class="token punctuation">)</span><span class="token punctuation">,</span>#0000 0<span class="token punctuation">)</span> left /100% 100%<span class="token punctuation">,</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>#000 <span class="token function">calc</span><span class="token punctuation">(</span>50% - 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#0000 0 <span class="token function">calc</span><span class="token punctuation">(</span>50% + 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#000 0<span class="token punctuation">)</span> left /2px 100%<span class="token punctuation">,</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>#0000 <span class="token function">calc</span><span class="token punctuation">(</span>50% - 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#000 0 <span class="token function">calc</span><span class="token punctuation">(</span>50% + 5px<span class="token punctuation">)</span><span class="token punctuation">,</span>#0000 0<span class="token punctuation">)</span> right/2px 100%<span class="token punctuation">;</span>
    <span class="token property">background-repeat</span><span class="token punctuation">:</span>no-repeat<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p>#0000是透明，同等transparent</p>
</blockquote>
<h3 id="内嵌加载"><a href="#内嵌加载" class="headerlink" title="内嵌加载"></a>内嵌加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-6">&lt;/div>
.progress-6</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>22px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span> #514b82<span class="token punctuation">;</span>
    <span class="token property">border</span><span class="token punctuation">:</span>2px solid<span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.progress-6::before</span> <span class="token punctuation">&#123;</span>
    <span class="token property">content</span><span class="token punctuation">:</span><span class="token string">""</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
    <span class="token property">margin</span><span class="token punctuation">:</span>2px<span class="token punctuation">;</span>
    <span class="token property">inset</span><span class="token punctuation">:</span>0 100% 0 0<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> #514b82<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p6 2s infinite<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p6</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">inset</span><span class="token punctuation">:</span>0<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>inset:0 100% 0 0;右边内缩100%，所以在keyframes部分需要将inset设置为0。</p>
<h3 id="珠链加载"><a href="#珠链加载" class="headerlink" title="珠链加载"></a>珠链加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-7">&lt;/div>
.progress-7</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>24px<span class="token punctuation">;</span>
    <span class="token property">-webkit-mask</span><span class="token punctuation">:</span><span class="token function">radial-gradient</span><span class="token punctuation">(</span>circle closest-side<span class="token punctuation">,</span>#000 94%<span class="token punctuation">,</span>#0000<span class="token punctuation">)</span> 0 0/25% 100%<span class="token punctuation">,</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>#000 0 0<span class="token punctuation">)</span> center/<span class="token function">calc</span><span class="token punctuation">(</span>100% - 12px<span class="token punctuation">)</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 12px<span class="token punctuation">)</span> no-repeat<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>#25b09b 0 0<span class="token punctuation">)</span> 0/0% no-repeat #ddd<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p7 2s infinite linear<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p7</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>100%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>遮罩-webkit-mask中radial-gradient是将宽度四等份，每份以最小closest-side的边为直径画圆。</p>
<h3 id="斑马线加载"><a href="#斑马线加载" class="headerlink" title="斑马线加载"></a>斑马线加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-8">&lt;/div>
.progress-8</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">-webkit-mask</span><span class="token punctuation">:</span><span class="token function">linear-gradient</span><span class="token punctuation">(</span>0deg<span class="token punctuation">,</span>#000 55%<span class="token punctuation">,</span>#0000 0<span class="token punctuation">)</span> bottom/100% 18.18%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>#f03355 0 0<span class="token punctuation">)</span> bottom/100% 0% no-repeat #ddd<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p8 2s infinite <span class="token function">steps</span><span class="token punctuation">(</span>7<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p8</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>100% 115%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>对linear-gradient描绘的角度做调整，再加上蒙版。</p>
<h3 id="水柱加载"><a href="#水柱加载" class="headerlink" title="水柱加载"></a>水柱加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-9">&lt;/div>
.progress-9</span> <span class="token punctuation">&#123;</span>
    <span class="token property">--r1</span><span class="token punctuation">:</span> 154%<span class="token punctuation">;</span>
    <span class="token property">--r2</span><span class="token punctuation">:</span> 68.5%<span class="token punctuation">;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span>
        <span class="token function">radial-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--r1<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--r2<span class="token punctuation">)</span> at top <span class="token punctuation">,</span>#0000 79.5%<span class="token punctuation">,</span>#269af2 80%<span class="token punctuation">)</span> center left<span class="token punctuation">,</span>
        <span class="token function">radial-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--r1<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--r2<span class="token punctuation">)</span> at bottom<span class="token punctuation">,</span>#269af2 79.5%<span class="token punctuation">,</span>#0000 80%<span class="token punctuation">)</span> center center<span class="token punctuation">,</span>
        <span class="token function">radial-gradient</span><span class="token punctuation">(</span><span class="token function">var</span><span class="token punctuation">(</span>--r1<span class="token punctuation">)</span> <span class="token function">var</span><span class="token punctuation">(</span>--r2<span class="token punctuation">)</span> at top <span class="token punctuation">,</span>#0000 79.5%<span class="token punctuation">,</span>#269af2 80%<span class="token punctuation">)</span> center right<span class="token punctuation">,</span>
        #ccc<span class="token punctuation">;</span>
    <span class="token property">background-size</span><span class="token punctuation">:</span> 50.5% 220%<span class="token punctuation">;</span>
    <span class="token property">background-position</span><span class="token punctuation">:</span> -100% 0%<span class="token punctuation">,</span>0% 0%<span class="token punctuation">,</span>100% 0%<span class="token punctuation">;</span>
    <span class="token property">background-repeat</span><span class="token punctuation">:</span>no-repeat<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p9 2s infinite linear<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p9</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">33%</span>  <span class="token punctuation">&#123;</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0% 33% <span class="token punctuation">,</span>100% 33% <span class="token punctuation">,</span>200% 33% <span class="token punctuation">&#125;</span>
    <span class="token selector">66%</span>  <span class="token punctuation">&#123;</span><span class="token property">background-position</span><span class="token punctuation">:</span> -100% 66%<span class="token punctuation">,</span>0% 66% <span class="token punctuation">,</span>100% 66% <span class="token punctuation">&#125;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-position</span><span class="token punctuation">:</span> 0% 100%<span class="token punctuation">,</span>100% 100%<span class="token punctuation">,</span>200% 100%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>radial-gradient画出水平面的波动，就三个圆。var(–r1)直接调用定义好的属性值。</p>
<h3 id="信号加载"><a href="#信号加载" class="headerlink" title="信号加载"></a>信号加载</h3><pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">&lt;div class="progress-10">&lt;/div>
.progress-10</span> <span class="token punctuation">&#123;</span>
    <span class="token property">width</span><span class="token punctuation">:</span>120px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span>60px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span>200px 200px 0 0<span class="token punctuation">;</span>
    <span class="token property">-webkit-mask</span><span class="token punctuation">:</span><span class="token function">repeating-radial-gradient</span><span class="token punctuation">(</span>farthest-side at bottom <span class="token punctuation">,</span>#0000 0<span class="token punctuation">,</span>#000 1px 12%<span class="token punctuation">,</span>#0000 <span class="token function">calc</span><span class="token punctuation">(</span>12% + 1px<span class="token punctuation">)</span> 20%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">radial-gradient</span><span class="token punctuation">(</span>farthest-side at bottom<span class="token punctuation">,</span>#514b82 0 95%<span class="token punctuation">,</span>#0000 0<span class="token punctuation">)</span> bottom/0% 0% no-repeat #ddd<span class="token punctuation">;</span>
    <span class="token property">animation</span><span class="token punctuation">:</span>p10 2s infinite <span class="token function">steps</span><span class="token punctuation">(</span>6<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> p10</span> <span class="token punctuation">&#123;</span>
    <span class="token selector">100%</span> <span class="token punctuation">&#123;</span><span class="token property">background-size</span><span class="token punctuation">:</span>120% 120%<span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>用repeating-radial-gradient方法画出环状的蒙版遮罩。radial-gradient从底部向上圆形渐变填充。</p>
<h3 id="3d加载"><a href="#3d加载" class="headerlink" title="3d加载"></a>3d加载</h3><p>html部分</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__dot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pl__text<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Loading…<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>css部分</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">:root</span> <span class="token punctuation">&#123;</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> #454954<span class="token punctuation">;</span>
  <span class="token property">--fg</span><span class="token punctuation">:</span> #e3e4e8<span class="token punctuation">;</span>
  <span class="token property">--fg-t</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>227<span class="token punctuation">,</span> 228<span class="token punctuation">,</span> 232<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">--primary1</span><span class="token punctuation">:</span> #255ff4<span class="token punctuation">;</span>
  <span class="token property">--primary2</span><span class="token punctuation">:</span> #5583f6<span class="token punctuation">;</span>
  <span class="token property">--trans-dur</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>16px + <span class="token punctuation">(</span>20 - 16<span class="token punctuation">)</span> * <span class="token punctuation">(</span>100vw - 320px<span class="token punctuation">)</span> / <span class="token punctuation">(</span>1280 - 320<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>135deg<span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--fg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 1em/1.5 <span class="token string">"Varela Round"</span><span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">place-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> background-color <span class="token function">var</span><span class="token punctuation">(</span>--trans-dur<span class="token punctuation">)</span><span class="token punctuation">,</span> color <span class="token function">var</span><span class="token punctuation">(</span>--trans-dur<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.pl</span> <span class="token punctuation">&#123;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 2em 0 2em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span> inset<span class="token punctuation">,</span> -2em 0 2em <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span> inset<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
  <span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateX</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl, .pl__dot</span> <span class="token punctuation">&#123;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-name</span><span class="token punctuation">:</span> shadow<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.1em 0.1em 0 0.1em black<span class="token punctuation">,</span> 0.3em 0 0.3em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50% - 0.75em<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>50% - 0.75em<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 1.5em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot, .pl__dot:before, .pl__dot:after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-duration</span><span class="token punctuation">:</span> 2s<span class="token punctuation">;</span>
  <span class="token property">animation-iteration-count</span><span class="token punctuation">:</span> infinite<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:before, .pl__dot:after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> background-color <span class="token function">var</span><span class="token punctuation">(</span>--trans-dur<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:before</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-name</span><span class="token punctuation">:</span> pushInOut1<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.05em 0 0.1em <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.2<span class="token punctuation">)</span> inset<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-name</span><span class="token punctuation">:</span> pushInOut2<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 0.75em<span class="token punctuation">;</span>
  <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.1em 0.3em 0.2em <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.4<span class="token punctuation">)</span> inset<span class="token punctuation">,</span> 0 -0.4em 0.2em #2e3138 inset<span class="token punctuation">,</span> 0 -1em 0.25em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span> inset<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0 75%<span class="token punctuation">,</span> 100% 75%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 0 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> 50% 2.25em<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(1)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> 0s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(2)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-30deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>30deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -0.1666666667s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(3)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-60deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>60deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -0.3333333333s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(4)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-90deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>90deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -0.5s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(5)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-120deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>120deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -0.6666666667s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(6)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-150deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>150deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -0.8333333333s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(7)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-180deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>180deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(8)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-210deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>210deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1.1666666667s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(9)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-240deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>240deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 4<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1.3333333333s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(10)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-270deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>270deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1.5s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(11)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-300deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>300deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 6<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1.6666666667s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(12)</span> <span class="token punctuation">&#123;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>-330deg<span class="token punctuation">)</span> <span class="token function">translateX</span><span class="token punctuation">(</span>5em<span class="token punctuation">)</span> <span class="token function">rotate</span><span class="token punctuation">(</span>330deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">z-index</span><span class="token punctuation">:</span> 6<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">animation-delay</span><span class="token punctuation">:</span> -1.8333333333s<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.pl__text</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 0.75em<span class="token punctuation">;</span>
  <span class="token property">max-width</span><span class="token punctuation">:</span> 5rem<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">text-shadow</span><span class="token punctuation">:</span> 0 0 0.1em <span class="token function">var</span><span class="token punctuation">(</span>--fg-t<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>-45deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/* Animations */</span>
<span class="token atrule"><span class="token rule">@keyframes</span> shadow</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">from</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.1em 0.1em 0 0.1em black<span class="token punctuation">,</span> 0.3em 0 0.3em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.1em 0.1em 0 0.1em black<span class="token punctuation">,</span> 0.8em 0 0.8em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.5<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">50%, to</span> <span class="token punctuation">&#123;</span>
    <span class="token property">box-shadow</span><span class="token punctuation">:</span> 0.1em 0.1em 0 0.1em black<span class="token punctuation">,</span> 0.3em 0 0.3em <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> pushInOut1</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">from</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary2<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-71%<span class="token punctuation">,</span> -71%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">50%, to</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@keyframes</span> pushInOut2</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">from</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-in<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0 75%<span class="token punctuation">,</span> 100% 75%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 0 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">25%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">animation-timing-function</span><span class="token punctuation">:</span> ease-out<span class="token punctuation">;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--primary1<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0 25%<span class="token punctuation">,</span> 100% 25%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 0 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">50%, to</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">clip-path</span><span class="token punctuation">:</span> <span class="token function">polygon</span><span class="token punctuation">(</span>0 75%<span class="token punctuation">,</span> 100% 75%<span class="token punctuation">,</span> 100% 100%<span class="token punctuation">,</span> 0 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="文字旋转扭曲"><a href="#文字旋转扭曲" class="headerlink" title="文字旋转扭曲"></a>文字旋转扭曲</h3><p>整体实现思路如下：</p>
<ol>
<li>构建n个同心的div矩形。每个矩形的尺寸逐渐递减，每个矩形的旋转延迟时间也逐渐递减，实现旋转时的扭曲效果。并且每个div矩形使用伪类::after来显示文本内容。</li>
<li>设置滤镜filter。用来设置文本的模糊效果以及明暗对比度。</li>
<li>设置animation旋转动画。让矩形在指定的周期内做360度旋转。</li>
</ol>
<p>html部分</p>
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>twist<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>textArea<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">var</span> text <span class="token operator">=</span> <span class="token string">"CSS3_Rotate"</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> size <span class="token operator">=</span> <span class="token number">860</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> delay <span class="token operator">=</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token comment">// 首先我们通过JS往容器中生成n个同心div矩形，这里我们生成42个。</span>
    <span class="token keyword">var</span> areaCount <span class="token operator">=</span> <span class="token number">42</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"textArea"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> areaCount<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token function">addArea</span><span class="token punctuation">(</span>
            size <span class="token operator">-</span> <span class="token punctuation">(</span>size <span class="token operator">/</span> areaCount<span class="token punctuation">)</span> <span class="token operator">*</span> i<span class="token punctuation">,</span>
            delay <span class="token operator">-</span> <span class="token punctuation">(</span>delay <span class="token operator">/</span> areaCount<span class="token punctuation">)</span> <span class="token operator">*</span> i<span class="token punctuation">,</span>
            container
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
    <span class="token keyword">function</span> <span class="token function">addArea</span><span class="token punctuation">(</span><span class="token parameter">areaSize<span class="token punctuation">,</span> areaDelay<span class="token punctuation">,</span> parentContainer</span><span class="token punctuation">)</span> <span class="token punctuation">&#123;</span>
        <span class="token keyword">var</span> area <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        area<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span>
            <span class="token string">"style"</span><span class="token punctuation">,</span>
            <span class="token string">"--size:"</span> <span class="token operator">+</span> areaSize <span class="token operator">+</span> <span class="token string">"px;"</span> <span class="token operator">+</span> <span class="token string">"--delay:"</span> <span class="token operator">+</span> areaDelay <span class="token operator">+</span> <span class="token string">"s;"</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        area<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span>
            <span class="token string">"title"</span><span class="token punctuation">,</span>
            text
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        parentContainer<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>area<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">&#125;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>css部分</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token selector">*, *::before, *::after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">body</span> <span class="token punctuation">&#123;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Lobster"</span><span class="token punctuation">,</span> cursive<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
  <span class="token property">place-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span>hidden<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token selector">.twist</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> aquamarine<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 78px<span class="token punctuation">;</span>
  <span class="token comment">/*blur(2px)表示元素外边框2px外使用高斯模糊效果,contrast(4)设置对比度，默认是1。可以使用百分比也可以使用小数表示*/</span>
  <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">blur</span><span class="token punctuation">(</span>2px<span class="token punctuation">)</span> <span class="token function">contrast</span><span class="token punctuation">(</span>4<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.twist > div</span> <span class="token punctuation">&#123;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--size<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
  <span class="token property">-webkit-animation</span><span class="token punctuation">:</span> twist 4s <span class="token function">var</span><span class="token punctuation">(</span>--delay<span class="token punctuation">)</span> infinite ease-in-out<span class="token punctuation">;</span>
          <span class="token property">animation</span><span class="token punctuation">:</span> twist 4s <span class="token function">var</span><span class="token punctuation">(</span>--delay<span class="token punctuation">)</span> infinite ease-in-out<span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token selector">.twist > div::after</span> <span class="token punctuation">&#123;</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">attr</span><span class="token punctuation">(</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>
<span class="token atrule"><span class="token rule">@-webkit-keyframes</span> twist</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">50%, 100%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span>
<span class="token comment">/*旋转和淡入淡出的动画效果，每个div元素延迟旋转的时间在之前创建同心矩形的时候已经设置了*/</span>
<span class="token atrule"><span class="token rule">@keyframes</span> twist</span> <span class="token punctuation">&#123;</span>
  <span class="token selector">0%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>0deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
  <span class="token selector">50%, 100%</span> <span class="token punctuation">&#123;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate</span><span class="token punctuation">(</span>-50%<span class="token punctuation">,</span> -50%<span class="token punctuation">)</span> <span class="token function">rotateZ</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">&#125;</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="相关文章"><a href="#相关文章" class="headerlink" title="相关文章"></a>相关文章</h2><table>
<thead>
<tr>
<th align="center"><a target="_blank" rel="noopener" href="http://c.biancheng.net/css3/at-rule.html">CSS@规则</a></th>
<th align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/xYUjsf4IKYORqOLNNnEHlA">64个超级有用的CSS资源</a></th>
<th align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/F22r72FW1CCYug_OtarZdQ">13个让你值得一试的CSS技巧</a></th>
</tr>
</thead>
<tbody><tr>
<td align="center"><a target="_blank" rel="noopener" href="https://www.html5tricks.com/page/26">HTML、CSS demo</a></td>
<td align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/Sn22fn_70QHWD753eFZHiQ">10个值得收藏的CSS资源</a></td>
<td align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/fkocUOGricoH4Zad4U3Wjw">10个顶级的CSS动画库</a></td>
</tr>
<tr>
<td align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/z7RYiamaG8YqP_uU8ZhuZA">CSS网格布局：最强大的CSS布局方案</a></td>
<td align="center"><a target="_blank" rel="noopener" href="https://mp.weixin.qq.com/s/r4MYpSfjqJ-p8rytRwNIUg">这32种CSS选择器，你都了解吗</a></td>
<td align="center"></td>
</tr>
</tbody></table>

                
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/blog/about" rel="external nofollow noreferrer">xmxe</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="https://xmxe.github.io/blog/posts/4ab442c90ff9/">https://xmxe.github.io/blog/posts/4ab442c90ff9/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/blog/about" target="_blank">xmxe</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/blog/tags/%E4%BB%A3%E7%A0%81%E5%AE%9E%E6%88%98/">
                                    <span class="chip bg-color">代码实战</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/blog/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="qq,qzone,wechat,weibo,douban" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/blog/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        
                            <img src="/blog/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                        
                    </div>
                    <div id="wechat">
                        
                            <img src="/blog/medias/reward/wechat.jpg" class="reward-img" alt="微信打赏二维码">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/blog/posts/b32de5bbeb68/">
                    <div class="card-image">
                        
                        <img src="https://pic1.zhimg.com/v2-6ef93db4040b0eb0b4524d06e372ad0f.jpg" class="responsive-img" alt="编写JavaScript代码的小技巧">
                        
                        <span class="card-title">编写JavaScript代码的小技巧</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            生成随机颜色&#x2F;随机数&#x2F;Boolean值// 生成随机颜色
const generateRandomHexColor = () => Math.floor(Math.random() * 0xffffff).toStrin
                        

                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <!--
                            <i class="far fa-clock fa-fw icon-date"></i>2023-05-17
                            -->

                            
                                <i class="fas fa-user fa-fw"></i>
                                <a href="/blog/about" >
                                    xmxe
                                </a>
                            
                        </span>
                        <span class="publish-author">
                            
                                <i class="fas fa-bookmark fa-fw icon-category"></i>
                                
                                    <a href="/blog/categories/JS/" class="post-category">
                                        JS
                                    </a>
                                
                            
                                
                                
                                <a href="/blog/tags/%E4%BB%A3%E7%A0%81%E5%AE%9E%E6%88%98/">
                                    <span class="chip bg-color">代码实战</span>
                                </a>
                                
                                
                            

                        </span>
                    </div>
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/blog/posts/50bd139ed1e1/">
                    <div class="card-image">
                        
                        <img src="https://pic1.zhimg.com/v2-a813d6ce08aea23e86f1f269a1760810_1440w.jpg" class="responsive-img" alt="分布式ID">
                        
                        <span class="card-title">分布式ID</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            分布式ID介绍什么是ID？日常开发中，我们需要对系统中的各种数据使用ID唯一表示，比如用户ID对应且仅对应一个人，商品ID对应且仅对应一件商品，订单ID对应且仅对应一个订单。我们现实生活中也有各种ID，比如身份证ID对应且仅对应一个人、地址
                        
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <!--
                            <i class="far fa-clock fa-fw icon-date"></i>2023-03-24
                            -->
                            
                                <i class="fas fa-user fa-fw"></i>
                                <a href="/blog/about" >
                                    xmxe
                                </a>
                            
                        </span>
                        <span class="publish-author">
                            
                                
                                <a href="/blog/tags/%E4%BB%A3%E7%A0%81%E5%AE%9E%E6%88%98/">
                                    <span class="chip bg-color">代码实战</span>
                                </a>
                                
                            
                            
                        </span>
                    </div>
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/blog/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/blog/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h1, h2, h3, h4, h5, h6'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h1, h2, h3, h4, h5, h6').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/blog/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="song"
                   id="569200213"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/blog/libs/aplayer/APlayer.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script> -->

    
    <div class="container row center-align" style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
            
                <span id="year">2022-2025
                </span>
            
            

            <a href="/blog/about" target="_blank">
                xmxe
            </a>
            |&nbsp;Powered by&nbsp;
            <a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;
            <a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>

            
            
            
            
            
            

            
            <br>

            
            <br>

            
        </div>
        <div class="col s12 m4 l4 social-link2 ">
    <a href="https://github.com/xmxe" class="tooltipped" target="_blank" data-tooltip="GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="https://gitee.com/xmxe" class="tooltipped" target="_blank" data-tooltip="码云" data-position="top" data-delay="50">
        <svg width="19" height="19" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position: relative; top: 2px; left: 0.5px;">
            <path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#fff">
            </path>
        </svg>
    </a>

















    
        
          <a href="/blog/download" class="tooltipped" target="_blank" data-tooltip="下载" data-position="top" data-delay="50">
            <i class="fas fa-download"></i>
          </a>
        
    



    <style>
  .mobiledevice {
    display: none !important;
  }

  footer .wechat_qrcode {
    position: fixed;
  }

  /*微信二维码*/
  .wechat_qrcode {
    position: absolute;
    margin-left: 10px;
    bottom: 10px;
    background: url("/blog/medias/xcx.png");
    zoom:40%;
  }

  .wechat:hover .wechat_qrcode {
    width: 430px;
    height: 430px;
    animation: move 0.4s linear 1 normal;
  }

  @keyframes move {
    0% {
      transform: translate(100px, 0);
      opacity: 0;
    }
    50% {
      transform: translate(50px, 0);
      opacity: 0.5;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }

  @media only screen and (max-width: 601px) {
    .wechat {
      display: none !important;
    }
    .mobiledevice {
      display: inline-block !important;
    }
  }
</style>

<a href="javascript:;" class="wechat" data-position="top" data-delay="50">
  <i class="fab fa-weixin"></i>
  <img class="wechat_qrcode" />
</a>

<a
  href="javascript:;"
  class="tooltipped mobiledevice"
  data-tooltip="微信: 464817304"
  data-position="top"
  data-delay="50"
>
  <i class="fab fa-weixin"></i>
</a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/blog/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>

    <div class="stars-con">
  <div id="stars"></div>
  <div id="stars2"></div>
  <div id="stars3"></div>  
</div>

<!-- 白天和黑夜主题 -->



<script>
  function switchNightMode() {
    
      setTimeout(function () {
        $('body').hasClass('DarkMode') 
        ? ($('body').removeClass('DarkMode'), localStorage.setItem('isDark', '0'), $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon')) 
        : ($('body').addClass('DarkMode'), localStorage.setItem('isDark', '1'), $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')),
          
        setTimeout(function () {
          $('.Cuteen_DarkSky').fadeOut(1e3, function () {
            $(this).remove()
          })
        }, 2e3)
      })
  }
</script>
    
    
    <script>
        /* 模式判断 */
        if (localStorage.getItem('isDark') === '1') {
            document.body.classList.add('DarkMode');
            $('#sum-moon-icon').addClass("fa-sun").removeClass('fa-moon')
        } else {
            document.body.classList.remove('DarkMode');
            $('#sum-moon-icon').removeClass("fa-sun").addClass('fa-moon')
        }
    </script>

    <script src="/blog/libs/materialize/materialize.min.js"></script>
    <script src="/blog/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/blog/libs/aos/aos.js"></script>
    <script src="/blog/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/blog/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/blog/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    

    

    

	
    

    

    
    <script type="text/javascript" src="/blog/libs/background/ribbon-dynamic.js" async="async"></script>
    

    

    <!-- 冒泡 -->
    
    <script type="text/javascript">
        // 只在桌面版网页启用特效
        // var windowWidth = $(window).width();
        
            document.write('<script type="text/javascript" src="/blog/libs/others/bubleAll.js"><\/script>');
        
        
    </script>
    

    <!-- 弹出文字 -->
    

</body>

</html>
